﻿<%@ Control Language="C#" AutoEventWireup="true"
            Inherits="Pages_Reservations_Ascx_ChangeReservationPopup" Codebehind="ChangeReservationPopup.ascx.cs" %>
<div id="change-dialog" title="Change Boat" style="display: none">
    <p class="validateTips">
        Check the available cabins before booking.</p>
    <fieldset>
        <table>
            <tr>
                <td>
                    <div class="item">
                        <div class="label" style="color: Red;">
                            Departure date:</div>
                        <div class="field">
                            <asp:TextBox ID="txtDepartureDate" runat="server" CssClass="datepicker required"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="*"
                                                        SetFocusOnError="true" ControlToValidate="txtDepartureDate"></asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item">
                        <div class="label">
                            Board date:</div>
                        <div class="field">
                            <asp:TextBox ID="txtBoardDate" runat="server" CssClass="datepicker required"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
                                                        SetFocusOnError="true" ControlToValidate="txtBoardDate"></asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="item">
                        <div class="label">
                            N&#186; of nights:
                        </div>
                        <div class="field">
                            <asp:DropDownList ID="ddlDateNumber" runat="server" CssClass="DateNumber">
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                                <asp:ListItem>6</asp:ListItem>
                                <asp:ListItem>7</asp:ListItem>
                                <asp:ListItem>8</asp:ListItem>
                                <asp:ListItem>9</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
                                                        InitialValue="" ControlToValidate="ddlDateNumber"></asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item">
                        <div class="label">
                            Boat:
                        </div>
                        <div class="field">
                            <asp:DropDownList ID="ddlBoat" runat="server" CssClass="Boat" AppendDataBoundItems="true">
                                <asp:ListItem class="firstItem" Value="">Select a boat ...</asp:ListItem>
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*"
                                                        InitialValue="" ControlToValidate="ddlBoat"></asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="item">
                        <div class="label">
                            N&#186; of cabins:
                        </div>
                        <div class="field">
                            <asp:DropDownList ID="ddlCabinNumber" runat="server" CssClass="CabinNumber">
                                <asp:ListItem>1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                                <asp:ListItem>6</asp:ListItem>
                                <asp:ListItem>7</asp:ListItem>
                                <asp:ListItem>8</asp:ListItem>
                                <asp:ListItem>9</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                                <asp:ListItem>13</asp:ListItem>
                                <asp:ListItem>14</asp:ListItem>
                                <asp:ListItem>15</asp:ListItem>
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"
                                                        InitialValue="" ControlToValidate="ddlCabinNumber"></asp:RequiredFieldValidator>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <%--<a id="linksearch" title="Check cabins" class="button"><span>Check cabin</span></a>--%>
                    <span class="result"></span>
                    <%--<a class="createbooking button"><span class="result1"></span>
                    </a>--%>
                </td>
            </tr>
        </table>
    </fieldset>
</div>

<script type="text/javascript">

    $(document).ready(function() {

        $("#btnChange").click(function() {
            $("#change-dialog").show();
            $("#change-dialog").dialog("open");
        });

        $("#change-dialog").dialog({
            autoOpen: false,
            width: 639,
            modal: true,
            buttons: {
                "Check & change": function() {
                    checkAvaiable();
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            },
            close: function() {
            }
        });

        function checkAvaiable() {
            var reservationID = '<%= ReservationID %>';
            var departureDate = $("#<%= txtDepartureDate.ClientID %>").val();
            var boardingDate = $("#<%= txtBoardDate.ClientID %>").val();
            var numOfCabins = $('.CabinNumber option:selected').val();
            var numOfNights = $('.DateNumber option:selected').val();
            //            var Charter = $('#cbCharter').is(':checked');
            var boatID = $('.Boat').val();

            var params = "{reservationID: '" + reservationID + "', boatID: '" + boatID + "', departureDateString: '" + departureDate + "', boardingDateString: '" + boardingDate + "', numOfNights:" + numOfNights + ", numOfCabins:" + numOfCabins + "}";
            $.ajax({
                type: "POST",
                url: "/Update.asmx/UpdateBoatForReservation",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: params,
                success: function(data) {
                    if (data.d) {
                        $('span.result').text("Change successful.");

                        window.location.reload();
                    } else {
                        $('span.result').text("Change failed.").css("font-size", "12pt").css("color", "red");
                        //                        $("button:contains('Change')").css("display", "none");
                    }
                    return false;
                },
                error: function(xmlHttpRequest) {
                    var err = eval("(" + xmlHttpRequest.responseText + ")");
                    alert("Errors! Change the information failed. Details: " + err.Message);
                    return false;
                }
            });
        }
    });
</script>